<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>杨钦松</title>
    
<style>
body{
    max-width: 540px;
    min-width: 320px;
    background-color: #f2f2f2;
    margin: 0 auto;
    color: #000;
}

a{
    text-decoration: none;
    color: white;
}


.search-box{
    
    display: flex;
    position:fixed;
    top: 0;
    left: 50%;
    box-sizing: border-box;
    padding-left: 12px;
    transform: translateX(-50%);
    width: 100%;
    max-width: 540px;
    min-width: 320px;
    height: 44px;
 
}
.search{
    flex: 1;
    border-radius: 5px;
    padding-left: 10px;
    height: 28px;
    margin: 8px 0;
    border: 1px solid #ccc;
    color:#666666;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    background-color: #f2f2f2;
    

}
.search::before{
    content: "";
    margin: 6px 0;
    display: inline-block;
    vertical-align: middle;
    width: 22px;
    height: 22px;
    background: url("./img/home-common-sprite2x@v7.15.png") no-repeat;
    background-size: 22px auto;
}

.user {
    width: 44px;
    height: 44px;
  text-align: center;
}
.user::before{
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    margin: 5px auto 0;
    background: url("./img/home-common-sprite2x@v7.15.png") no-repeat 0px -38px;
    background-size: 22px auto ;


}
.user::after{
    content: "我的";
    
}


.slide img{
    width: 100%;
}

.local-nav{
    margin: 0 ;
    padding: 0;
    display: flex;
    list-style: none;
    height: 64px;
    background-color: #fff;
    border-radius: 8px;
    margin: 0 4px;
}
.local-nav li{
    flex: 1;
}
.local-nav li a{
    display: block;
    text-align: center;
    height: 64px;
    font-size: 12px;
    color: #000;
}
.local-nav li:nth-child(1) a::before{
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    margin: 5px auto 0;
    background: url("./img/home-fivemain-sprite2x@v7.15.png") no-repeat;
    background-size: 40px auto;
}
.local-nav li:nth-child(2) a::before{
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    margin: 5px auto 0;
    background: url("./img/home-fivemain-sprite2x@v7.15.png") no-repeat 0 -40px;
    background-size: 40px auto;
}
.local-nav li:nth-child(3) a::before{
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    margin: 5px auto 0;
    background: url("./img/home-fivemain-sprite2x@v7.15.png") no-repeat 0 -80px;
    background-size: 40px auto;
}
.local-nav li:nth-child(4) a::before{
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    margin: 5px auto 0;
    background: url("./img/home-fivemain-sprite2x@v7.15.png") no-repeat 0 -120px;
    background-size: 40px auto;
}
.local-nav li:nth-child(5) a::before{
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    margin: 5px auto 0;
    background: url("./img/home-fivemain-sprite2x@v7.15.png") no-repeat 0 -160px;
    background-size: 40px auto;
}

  *{
      margin: 0px;
      padding: 0px;
  }
  .nav{
      border-radius: 8px;
      margin: 0 4px 3px;
  
    
     overflow: hidden;
  }
  .nav .hang{
 width: 100%;
 height: 66.19px;
 display: flex;
 
  }
  .nav .hang .lie{
      line-height: 66.19px;
      text-align: center;
      flex: 23%;
      border-right: 1px solid #fff;
      box-sizing: border-box;
  }
  .nav .hang .lie:first-child{
      flex: 31%;  
      text-align: left;
    padding-left: 10px;
   
  }
  .nav .hang .lie:last-child{
      border: none;
  } 
  .nav .hang .lie:last-child{
     box-sizing: border-box;
  }
  .nav .hang .lie a {
      color: #fff;
      text-decoration: none;
  }

  .nav .a .lie:first-child{
      background:url("./img/grid-nav-items-hotel@v7.15(1).png") no-repeat right bottom;
      background-size: 73px;
      border-top-left-radius: 8px;
  }
.nav .a .lie:nth-child(2){
    background:url("./img/grid-nav-items-hot(1).png") no-repeat left bottom;
    background-size: 37px;
}
  .nav .a .lie:last-child{
      flex: 46%;
      background:linear-gradient(to right,#ffbc49,#ffd252);
  }
  .nav .a .lie:last-child a{
      color:#a05416;
  }

  .nav .a .lie:last-child{
      background:url("./img/grid-nav-items-hot(1).png") no-repeat right bottom;
      background-size: 161px;
      display: block;
      color: #a05416;
  }

  .nav .b .lie:first-child{
      background:url("./img/grid-nav-items-flight@v7.15.png") no-repeat right bottom;
      background-size: 79px auto;
  }
 
 .nav .c .lie:first-child{
      background:url("./img/grid-nav-items-travel@v7.15.png") no-repeat right bottom;
      background-size: 94px auto;
    border-bottom-left-radius: 8px;
  }
  .nav .c .lie:nth-child(2){
    background:url("./img/grid-nav-items-train.png") no-repeat left bottom;
    background-size: 37px;
}


  .a{
      background:linear-gradient(to right,#fa5956,#fb8650 54%);
      
  }
  .b{
      margin: 1px 0;
      background:linear-gradient(to right,#4b8fed,#53bced);
  }
  .c{
      background:linear-gradient(to right,#34c2aa,#6cd557);
  }
  

  section ul {
    display: flex;
    list-style: none;
    height: 64px;
    margin: 0 4px;
 
}
.li-itmes{
    flex: 1;
    display: flex;
}
.li-itmes a{
    flex: 1;
    text-align: center;
    color: #000;
    font-size: 12px;

}
.li-itmes:nth-child(1) a::before{
    content: "";
    display: block;
    margin: 5px auto;
    width: 28px;
    height: 28px;
    background: url("./img/un_ico_subnav2x@v7.33.png") no-repeat;
    background-size: 28px auto;
}
.li-itmes:nth-child(2) a::before{
    content: "";
    display: block;
    margin: 5px auto;
    width: 28px;
    height: 28px;
    background: url("./img/un_ico_subnav2x@v7.33.png") no-repeat 0 -28px;
    background-size: 28px auto;
}
.li-itmes:nth-child(3) a::before{
    content: "";
    display: block;
    margin: 5px auto;
    width: 28px;
    height: 28px;
    background: url("./img/un_ico_subnav2x@v7.33.png") no-repeat 0 -56px;
    background-size: 28px auto;
}
.li-itmes:nth-child(4) a::before{
    content: "";
    display: block;
    margin: 5px auto;
    width: 28px;
    height: 28px;
    background: url("./img/un_ico_subnav2x@v7.33.png") no-repeat 0 -84px;
    background-size: 28px auto;
}
.li-itmes:nth-child(5) a::before{
    content: "";
    display: block;
    margin: 5px auto;
    width: 28px;
    height: 28px;
    background: url("./img/un_ico_subnav2x@v7.33.png") no-repeat 0 -112px;
    background-size: 28px auto;
}
section ol {
    list-style: none;
    display: flex;
    margin: 0 4px;
    height: 64px;
    
}
section ol li{
    display: flex;
    flex: 1;
    
}
section ol li a{
    flex: 1;
    text-align: center;
    color: #000;
    font-size: 12px;

}
section ol li:nth-child(1) a::before{
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto;
    background: url("./img/un_ico_subnav2x@v7.33.png") no-repeat 0 -140px;
    background-size: 28px auto;
}
section ol li:nth-child(2) a::before{
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto;
    background: url("./img/un_ico_subnav2x@v7.33.png") no-repeat 0 -168px;
    background-size: 28px auto;
}
section ol li:nth-child(3) a::before{
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto;
    background: url("./img/un_ico_subnav2x@v7.33.png") no-repeat 0 -196px;
    background-size: 28px auto;
}
section ol li:nth-child(4) a::before{
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto;
    background: url("./img/un_ico_subnav2x@v7.33.png") no-repeat 0 -224px;
    background-size: 28px auto;
}
section ol li:nth-child(5) a::before{
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto;
    background: url("./img/un_ico_subnav2x@v7.33.png") no-repeat 0 -252px;
    background-size: 28px auto;
}

footer {
    display: flex;
    height: 60px;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    background-color: #fff;
}
footer div{
    flex: 1;
    display: flex;
    height: 60px;
}
footer div a{
    flex: 1;
    color: gray;

    text-align: center;
}

footer div:nth-child(1) a::before{
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    margin: 4px auto;
 background: url("./img/dianhua.png") no-repeat;
    background-size:  32px auto;
}
footer div:nth-child(2) a::before{
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    margin: 4px auto;
  background: url("./img/下载.jpg") no-repeat;
    background-size:  32px auto;
}
footer div:nth-child(3) a::before{
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    margin: 4px auto;
  background: url("./img/wod.png") no-repeat;
    background-size:  32px auto;
}
.rights p{
    margin-top: 15px;
    text-align: center;
    color: #ccc;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
svg{
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
  
}
</style>

</head>
<body>
    <div class="search-box">
        <div class="search">搜索：目的地/酒店/景点/航班号</div>
        <a href="" class="user"></a>
    </div>
    
     <div class="slide">
         <img src="img/baodi2@v7.15.jpg">
     </div>
   
         <ul class="local-nav">
             <li><a href="">景点攻略</a></li>
             <li><a href="">门票活动</a></li>
             <li><a href="">美食林</a></li>
             <li><a href="">周边游</a></li>
             <li><a href="">一日游</a></li>
         </ul>
         <!-- nav  -->
    <div class="nav">
   <div class="hang a ">
       <div class="lie"><a href="javascript:;"><span>酒店</span></a></div>
       <div class="lie"><a href="javascript:;"><span>民俗·客栈</span></a></div>
       <div class="lie"><a href="javascript:;"><span>特价·爆款</span></a></div>
       
   </div>
   <div class="hang b ">
    <div class="lie"><a href="javascript:;"><span>机票</span></a></div>
    <div class="lie"><a href="javascript:;"><span>火车</span></a></div>
    <div class="lie"><a href="javascript:;"><span>汽车·船票</span></a></div>
    <div class="lie"><a href="javascript:;"><span>转车·租车</span></a></div>
   </div>
   <div class="hang c">
    <div class="lie"><a href="javascript:;"><span>旅游</span></a></div>
    <div class="lie"><a href="javascript:;"><span>私家团</span></a></div>
    <div class="lie"><a href="javascript:;"><span>邮轮游</span></a></div>
    <div class="lie"><a href="javascript:;"><span>定制游</span></a></div>
   </div>
    </div>
    
    <section>
        <ul>
            <li class="li-itmes"><a href="">自由行</a></li>
            <li class="li-itmes"><a href="">wifi电话卡</a></li>
            <li class="li-itmes"><a href="">保险签证</a></li>
            <li class="li-itmes"><a href="">换钞购物</a></li>
            <li class="li-itmes"><a href="">向导包车</a></li>
        </ul>
        <ol>
            <li><a href="">特价机票</a></li>
            <li><a href="">礼品卡</a></li>
            <li><a href="">申卡借钱</a></li>
            <li><a href="">社区</a></li>
            <li><a href="">更多</a></li>
        </ol>
     </section>

     <footer>
        <div><a href="">联系我们</a></div>

        <div> <a href="">下载客户端</a></div>

        <div> <a href="">我的</a></div>
    </footer>

    <div class="rights">
        <p>2021携程旅行|沪ICP备08023580</p>
    </div>

</body>
</html>